.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    animation: bg-fade-in 0.6s;
    /*background: animation 1s;*/
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 200px;
    min-height: 100px;
    transform: translate(-50%, -50%);
    z-index: 999;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-slide-in {
    animation: slide-in 0.6s;
}
@keyframes bg-fade-in {
    0%   {background: rgba(0, 0, 0, 0);}
    100% {background: rgba(0, 0, 0, 0.4);}
}
@-webkit-keyframes bg-fade-in {
    0%   {background: rgba(0, 0, 0, 0);}
    100% {background: rgba(0, 0, 0, 0.4);}
}
@keyframes slide-in {
    0% {top: 0;}
    100% {top: 50%}
}
@-webkit-keyframes slide-in {
    0% {top: 0;}
    100% {top: 50%}
}
